<template>
  <div class='modal'>
    <el-dialog
      v-model='dialogVisible'
      :title='isNewRef ? modalConfig.header.newTitle : modalConfig.header.editTitle'
      width='30%'
      center
    >
      <div class='form'>
        <el-form :model='formData' label-width='70px' size='large'>
          <template v-for='item in modalConfig.formItems' :key='item.prop'>
            <el-form-item :label='item.label' :prop='item.prop'>
              <template v-if='item.type === "input"'>
                <el-input v-model='formData[item.prop]' :placeholder='item.placeholder' />
              </template>
              <template v-else-if='item.type === "data-picker"'>
                <el-date-picker
                  v-model='formData.createAt'
                  type='daterange'
                  range-separator='-'
                  start-placeholder='开始时间'
                  end-placeholder='结束时间'
                />
              </template>
              <template v-else-if='item.type === "select"'>
                <el-select v-model='formData[item.prop]' :placeholder='item.placeholder'>
                  <template v-for='option in item.options' :key='option.value'>
                    <el-option :label='option.label' :value='option.value' />
                  </template>
                </el-select>
              </template>
              <template v-else-if='item.type === "custom"'>
                <slot :name='item.slotName'></slot>
              </template>
            </el-form-item>
          </template>
        </el-form>
      </div>

      <template #footer>
        <span class='dialog-footer'>
          <el-button @click='dialogVisible = false'>取消</el-button>
          <el-button type='primary' @click='handleConfirm'>确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang='ts'>
import { computed, reactive, ref } from 'vue'
import useMainStore from '@/stores/main/main'
import useSystemStore from '@/stores/main/system/system'

interface IProps {
  modalConfig: {
    pageName: string,
    header: {
      newTitle: string,
      editTitle: string
    },
    formItems: any[]
  },
  otherInfo?: any[]
}

const props = defineProps<IProps>()

const initialData: any = {}
for (const item of props.modalConfig.formItems) {
  initialData[item.prop] = item.initialValue ?? ''
}

const dialogVisible = ref(false)
const formData = reactive<any>({})

const systemStore = useSystemStore()
const mainStore = useMainStore()

const modalConfigRef = computed(() => {
  const optionData = mainStore.entireDepartment.map(item => {
    return { label: item.name, value: item.id }
  })

  const modalConfig = props.modalConfig

  modalConfig.formItems.forEach(item => {
    if (item.prop === 'parentId') {
      item.options?.push(...optionData)
    }
  })

  return modalConfig
})

const isNewRef = ref(true)
const editData = ref()

function setVisible(itemData?: any) {
  dialogVisible.value = true
  isNewRef.value = false

  if (itemData) {
    // 编辑数据
    for (const key in itemData) {
      formData[key] = itemData[key]
    }

    editData.value = itemData
  } else {
    // 新建数据
    isNewRef.value = true
    for (const key in initialData) {
      formData[key] = initialData[key]
    }
    editData.value = null
  }
}

function handleConfirm() {
  dialogVisible.value = false

  let infoData = { ...formData }

  if (props.otherInfo) {
    infoData = { ...infoData, ...props.otherInfo }
  }

  if (!(isNewRef.value) && editData.value.id) {
    systemStore.editDataAction(props.modalConfig.pageName, editData.value.id, infoData)
  } else {

    systemStore.createDataAction(props.modalConfig.pageName, infoData)
  }

}

defineExpose({ setVisible })
</script>

<style scoped lang='less'>
.modal {
}
</style>
